{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '工具类:example/utilities/index', '背景'])}
<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">

          <div class="border-example">
            <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
            <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
            <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
            <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
            <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
            <div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
            <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
            <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
            <div class="p-3 mb-2 bg-indigo text-white">.bg-indigo</div>
            <div class="p-3 mb-2 bg-purple text-white">.bg-purple</div>
            <div class="p-3 mb-2 bg-pink text-white">.bg-pink</div>
            <div class="p-3 mb-2 bg-yellow text-white">.bg-yellow</div>
            <div class="p-3 mb-2 bg-cyan text-white">.bg-cyan</div>
            <div class="p-3 mb-2 bg-brown text-white">.bg-brown</div>
            <div class="p-3 mb-2 bg-teal text-white">.bg-teal</div>
            <div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
            <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
            <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
          </div>
          <pre>&lt;div class="p-3 mb-2 bg-primary text-white"&gt;.bg-primary&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-secondary text-white"&gt;.bg-secondary&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-success text-white"&gt;.bg-success&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-danger text-white"&gt;.bg-danger&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-warning text-dark"&gt;.bg-warning&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-info text-dark"&gt;.bg-info&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-light text-dark"&gt;.bg-light&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-dark text-white"&gt;.bg-dark&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-indigo text-white"&gt;.bg-indigo&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-purple text-white"&gt;.bg-purple&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-pink text-white"&gt;.bg-pink&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-yellow text-white"&gt;.bg-yellow&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-cyan text-white"&gt;.bg-cyan&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-brown text-white"&gt;.bg-brown&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-teal text-white"&gt;.bg-teal&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-body text-dark"&gt;.bg-body&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-white text-dark"&gt;.bg-white&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-transparent text-dark"&gt;.bg-transparent&lt;/div&gt;</pre>
          <h6>背景渐变</h6>
          <p>你的自定义CSS需要渐变吗？只需添加 <code>background-image: var(--bs-gradient);</code> 。</p>

          <div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primary.bg-gradient</div>
          <div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondary.bg-gradient</div>
          <div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-success.bg-gradient</div>
          <div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-danger.bg-gradient</div>
          <div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warning.bg-gradient</div>
          <div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-info.bg-gradient</div>
          <div class="p-3 mb-2 bg-light bg-gradient text-dark">.bg-light.bg-gradient</div>
          <div class="p-3 mb-2 bg-dark bg-gradient text-white">.bg-dark.bg-gradient</div>
          <div class="p-3 mb-2 bg-indigo bg-gradient text-white">.bg-indigo.bg-gradient</div>
          <div class="p-3 mb-2 bg-purple bg-gradient text-white">.bg-purple.bg-gradient</div>
          <div class="p-3 mb-2 bg-pink bg-gradient text-white">.bg-pink.bg-gradient</div>
          <div class="p-3 mb-2 bg-yellow bg-gradient text-white">.bg-yellow.bg-gradient</div>
          <div class="p-3 mb-2 bg-cyan bg-gradient text-white">.bg-cyan.bg-gradient</div>
          <div class="p-3 mb-2 bg-brown bg-gradient text-white">.bg-brown.bg-gradient</div>
          <div class="p-3 mb-2 bg-teal bg-gradient text-white">.bg-teal.bg-gradient</div>

          <h6>不透明度</h6>
          <div class="border-example">
            <div class="bg-success p-2 text-white">这是默认的 success 背景</div>
            <div class="bg-success p-2" style="--bs-bg-opacity: .5;">这是 50% 不透明度的 success 背景</div>
          </div>
          <pre>&lt;div class="bg-success p-2 text-white"&gt;这是默认的 success 背景&lt;/div&gt;
&lt;div class="bg-success p-2" style="--bs-bg-opacity: .5;"&gt;这是 50% 不透明度的 success 背景&lt;/div&gt;</pre>
          <p>或者，从任何一个选项中选择 <code>.text-opacity</code> 相关类：</p>
          <div class="border-example">
            <div class="bg-success p-2 text-white">这是默认的 success 背景</div>
            <div class="bg-success p-2 text-white bg-opacity-75">这是 75% 不透明度的 success 背景</div>
            <div class="bg-success p-2 text-dark bg-opacity-50">这是 50% 不透明度的 success 背景</div>
            <div class="bg-success p-2 text-dark bg-opacity-25">这是 25% 不透明度的 success 背景</div>
            <div class="bg-success p-2 text-dark bg-opacity-10">这是 10% 不透明度的 success 背景</div>
          </div>
          <pre>&lt;div class="bg-success p-2 text-white"&gt;这是默认的 success 背景&lt;/div&gt;
&lt;div class="bg-success p-2 text-white bg-opacity-75"&gt;这是 75% 不透明度的 success 背景&lt;/div&gt;
&lt;div class="bg-success p-2 text-dark bg-opacity-50"&gt;这是 50% 不透明度的 success 背景&lt;/div&gt;
&lt;div class="bg-success p-2 text-dark bg-opacity-25"&gt;这是 25% 不透明度的 success 背景&lt;/div&gt;
&lt;div class="bg-success p-2 text-dark bg-opacity-10"&gt;这是 10% 不透明度的 success 背景&lt;/div&gt;</pre>

        </div>
      </div>
    </div>

  </div>